<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JSX插值表达式</title>
	</head>
	<body>
		<div id="app"></div>
		
		<script src="./js/react17.development.js"></script>
		<script src="./js/react-dom17.development.js"></script>
		<script src="./js/babel.min.js"></script>
		<script type="text/babel">
			// 模拟数据：数据中包含了可以编译执行的代码
			const article = "<h2>长恨歌</h2><iframe src='https://www.sina.com.cn' style='width:100%;height:500px;'></iframe>"
			
			// JSX输出
			let div = 	<div>
							{/* 正常情况下当成普通文本进行输出 */}
							<p>文章数据: { article }</p>
							{/* 
								如果有需求要输出为富文本:不推荐 
								代码中直接富文本输出内容的方式很容易造成代码注入漏洞
								企业项目中一般通过第三方富文本库完成转换输出
							*/}
							<p dangerouslySetInnerHTML={ {__html:article} }></p>
						</div>
			// 渲染展示
			ReactDOM.render(div, document.querySelector("#app"))
		</script>
	</body>
</html>